<template>
	<view class="content over-y box-b ff-m bg-f5" :style="[{ paddingBottom: `${bottom}px` }]">
		<view class="my-address-item-box">
			<view class="user-name-phone-box">
				<text>{{orderInfo.real_name}}</text>
				<text class="phone">{{orderInfo.user_phone}}</text>
				<text class="default">默认</text>
			</view>
			<view class="user-address-box">{{orderInfo.user_address}}</view>
		</view>
		<view class="tobepaid-plate-box">
			<view class="top-shop-box flex-c-c">
				<image src="../../pageMember/static/icon10.png" mode="widthFix"></image>
				<text class="ellipsis">{{orderInfo.mer_name}}</text>
				<image src="/static/cart_icon/icon1.png" mode="heightFix"></image>
			</view>
			<view class="goods-item-box" v-for="(item,index) in orderInfo.product" :key="index">
				<view class="left-img-box">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="right-info-box">
					<view class="top-box">
						<text class="ellipsis">{{item.store_name}}</text>
						<text>x{{item.product_num}}</text>
					</view>
					<view class="center-box">{{item.product_sku}}</view>
					<view class="bottom-box">
						￥<text>{{item.product_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-info-box">
			<view class="top-title-box">订单信息</view>
			<view class="bottom-order-info-box" style="flex-direction: column;">
				<view class="cellList" v-if="orderInfo.order_sn">
					<view class="title">订单编号：</view>
					<view class="sub-content">{{orderInfo.order_sn}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.create_time">
					<view class="title">下单时间：</view>
					<view class="sub-content">{{orderInfo.create_time}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.pay_time">
					<view class="title">付款时间：</view>
					<view class="sub-content">{{orderInfo.pay_time}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.delivery_time">
					<view class="title">发货时间：</view>
					<view class="sub-content">{{orderInfo.delivery_time}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.confirm_time">
					<view class="title">收货时间：</view>
					<view class="sub-content">{{orderInfo.confirm_time}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.refund_time">
					<view class="title">申请时间：</view>
					<view class="sub-content">{{orderInfo.refund_time}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.refund.refund_message" style="align-items: flex-start;">
					<view class="title">申请原因：</view>
					<view class="sub-content">
						<view>{{ orderInfo.refund.refund_message }}</view>
						<view style="margin-top: 20rpx;" v-if="orderInfo.refund.pics.length">
							<block v-for="(item, index) in orderInfo.refund.pics" :key="item.id">
								<image style="width: 25%;height: 132rpx;" @click="preImg(item.path, orderInfo.refund.pics)" :src="item.path" mode=""></image>
							</block>
						</view>
					</view>
				</view>
				<view class="cellList" v-if="orderInfo.refund.fail_message">
					<view class="title">拒绝原因：</view>
					<view class="sub-content">{{orderInfo.refund.fail_message}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.logistics_no">
					<view class="title">物流单号：</view>
					<view class="sub-content copy">
						{{orderInfo.logistics_no}}
						<text @click="bindFz(orderInfo.logistics_no)">复制</text>
					</view>
				</view>
				<view class="cellList" v-if="orderInfo.delivery_company">
					<view class="title">物流公司：</view>
					<view class="sub-content">{{orderInfo.delivery_company}}</view>
				</view>
				<view class="cellList" v-if="orderInfo.mark">
					<view class="title">订单备注：</view>
					<view class="sub-content">{{orderInfo.mark}}</view>
				</view>
<!-- 				<view class="left-key-box">
					<text v-if="orderInfo.order_sn">订单编号：</text>
					<text v-if="orderInfo.create_time">下单时间：</text>
					<text v-if="orderInfo.pay_time">付款时间：</text>
					<text v-if="orderInfo.delivery_time">发货时间：</text>
					<text v-if="orderInfo.confirm_time">收货时间：</text>
					<text v-if="orderInfo.refund_time">申请时间：</text>
					<text v-if="orderInfo.refund.refund_message">申请原因：</text>
					<text v-if="orderInfo.refund.fail_message">拒绝原因：</text>
					<text v-if="orderInfo.logistics_no">物流单号：</text>
					<text v-if="orderInfo.delivery_company">物流公司：</text>
					<text v-if="orderInfo.mark">订单备注：</text>
				</view>
				<view class="right-value-box">
					<text v-if="orderInfo.order_sn">{{orderInfo.order_sn}}</text>
					<text v-if="orderInfo.create_time">{{orderInfo.create_time}}</text>
					<text v-if="orderInfo.pay_time">{{orderInfo.pay_time}}</text>
					<text v-if="orderInfo.delivery_time">{{orderInfo.delivery_time}}</text>
					<text v-if="orderInfo.confirm_time">{{orderInfo.confirm_time}}</text>
					<text v-if="orderInfo.refund_time">{{orderInfo.refund_time}}</text>
					<view v-if="orderInfo.refund.refund_message" style="padding-bottom: 20rpx;">
						<view>{{ orderInfo.refund.refund_message }}</view>
						<view>
							<block v-for="(item, index) in orderInfo.refund.pics" :key="item.id">
								<image style="width: 25%;height: 132rpx;" @click="preImg(item.path, orderInfo.refund.pics)" :src="item.path" mode=""></image>
							</block>
						</view>
					</view>
					<text v-if="orderInfo.refund.fail_message">{{ orderInfo.refund.fail_message }}</text>
					<view class="fz" v-if="orderInfo.logistics_no">
						<text>{{orderInfo.logistics_no}}</text>
						<text @click="bindFz(orderInfo.logistics_no)">复制</text>
					</view>
					<text v-if="orderInfo.delivery_company">{{orderInfo.delivery_company}}</text>
					<text v-if="orderInfo.mark">{{orderInfo.mark}}</text>
				</view> -->
			</view>
		</view>
		<view class="total-price-box">
			<view class="bottom-order-info-box">
				<view class="left-key-box">
					<text>商品价格</text>
					<text>运费</text>
				</view>
				<view class="right-value-box">
					<text>￥{{orderInfo.pay_price}}</text>
					<text>￥{{orderInfo.express_fee}}</text>
				</view>
			</view>
			<view class="bottom-box">需付款¥{{orderInfo.total_price}}</view>
		</view>
		<view class="bottom-but-box" id="bottom-but-box">
			<view
				@click.stop="toPend(orderInfo, 1)"
				class="cancel-box"
				style="margin-right: 0;"
				v-if="
				orderInfo.paid == 1
				&&
				(orderInfo.status == 0 || (orderInfo.status == 6 && orderInfo.refund.refund_type == 1))"
			>
				<text>申请退款</text>
			</view>
			<view
				@click.stop="toPend(orderInfo, 2)"
				class="cancel-box"
				v-if="orderInfo.status == 1 || orderInfo.status == 2 || (orderInfo.status == 6 && orderInfo.refund.refund_type == 2)"
			>
				<text>申请售后</text>
			</view>
			<view @click.stop="configFun(orderInfo.order_id)" class="buy-box" v-if="orderInfo.status == 1 || (orderInfo.status == 6 && orderInfo.delivery_time && !orderInfo.confirm_time)">
				<text>确认收货</text>
			</view>
			<view class="cancel-box" v-if="orderInfo.status == 2 || orderInfo.status == 3 || (orderInfo.status == 6 && orderInfo.confirm_time)" @click="setInvoic">
				<text>{{ orderInfo.invoice.status == 3? '申请开票' : '查看发票' }}</text>
			</view>
<!-- 			<view class="cancel-box" v-if="orderInfo.invoice && orderInfo.status > 1" @click="showInvoic">
				<text>查看发票</text>
			</view> -->
			<view @click.stop="evaluateFun(orderInfo.order_id)" class="buy-box"  style="background: rgba(48, 48, 48, 0);border: 1rpx solid #808080;color: #000;" v-if="orderInfo.status == 2 || (orderInfo.status == 6 && orderInfo.confirm_time)">
				<text>评价</text>
			</view>
			<view @click.stop="cancelFun(orderInfo.order_id)" class="cancel-box" v-if="orderInfo.paid == 0">
				<text>取消订单</text>
			</view>
			<view class="buy-box" v-if="orderInfo.paid == 0" @click="payNow">
				<text>立即支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				bottom: 0,
				order_id: '',
				orderInfo:{},//订单信息
				orderStatus: ['待发货', '待收货', '待评价', '已完成', '售后中', '售后成功', '售后失败'],
			}
		},
		onLoad(options) {
			uni.showLoading({ title:'加载中',mark:true });
			this.order_id = options.orderId||''
		},
		onShow() {
			this.getStoreOrderDetail(this.order_id);
		},
		computed: {
			getStatus() {
				const { orderStatus, orderInfo: { status, paid, refund } } = this
				if (status == 5) {
					return refund.status == 3? '售后成功' : '售后审核通过'
				}
				return !paid? '待支付' : orderStatus[status]
			}
		},
		methods:{
			preImg(current, list){
				const urls = list.map(item => item.path)
				uni.previewImage({
					current,
					urls
				})
			},
			// 查看发票
			showInvoic: function () {
				uni.navigateTo({
					url: `/pageMember/orderDetails/showInvoicing?url=${this.orderInfo.invoice}`
				})
			},
			payNow(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$u.api.payNowApi({order_id: this.order_id}).then(res=>{
					if(res.code==1){
						console.log('订单列表：',res);
						const {
							timeStamp,
							nonceStr,
							signType,
							paySign,
						} = res.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp,
							nonceStr,
							package: res.data.package,
							signType,
							paySign,
							orderInfo: res.data,
							success: res => {
								uni.showModal({
									title: '支付成功',
									showCancel: false,
									success: () => {
										this.getStoreOrderDetail(this.order_id)
									}
								})
							},
							fail: msg => {
								
							}
						})
					} else {
						uni.showToast({
							title: '获取支付参数失败',
							icon: 'none'
						})
					}
				});
			},
			// 开票
			setInvoic: function () {
				const { status, file } = this.orderInfo.invoice
				if (status == 2) {
					uni.navigateTo({
						url: `/pageMember/orderDetails/showInvoicing?url=${file}`
					})
					return
				}
				uni.navigateTo({
					url: `/pageMember/orderDetails/invoicing?order_id=${this.order_id}&status=${status}`,
					events: {
						reload: isreload => {
							isreload && this.getStoreOrderDetail(this.order_id)
						}
					},
					success: res => {
						res.eventChannel.emit('reload')
					}
				})
			},
			getStoreOrderDetail(orderId){//订单详情数据
				this.$u.api.storeOrderDetailApi({order_id:orderId}).then(res=>{
					if(res.code==1){
						console.log('产品：',res);
						this.orderInfo = res.data;
						this.$nextTick(() => {
							uni.setNavigationBarTitle({
								title: this.getStatus || '订单详情'
							})
							uni.createSelectorQuery()
							.in(this)
							.select('#bottom-but-box')
							.fields({ size: true }, res => {
								this.bottom = res.height
							})
							.exec()
						})
					}else{
						this.$showToast(message || '获取订单详情失败')
					}
				});
			},
			bindFz(e){ //单号复制
				uni.setClipboardData({
					data: e,//复制的内容
					success: () => {
						this.$showToast('已复制到剪贴板');
					}
				})
			},
			toPend(item, refund_type, order_type = 1) {	// 前往退款页面
				const param = { item, refund_type, order_type };
				uni.navigateTo({
					url: `/pageMember/orderDetails/goReturnGoods`,
					events: {
						changeStatus: isUp => {
							console.log(isUp)
							isUp && this.getStoreOrderDetail(this.order_id)
						}
					},
					success: res => {
						res.eventChannel.emit('changeStatus', param)
					}
				})
			},
			configFun(order_id) {// 确认收货
				uni.showModal({
					content: '您确定要收货么?',
					confirmColor:'#000',
					success: res => {
						if (res.confirm) {
							console.log(order_id);
							this.$u.api.confirmOrderApi({
								order_id:order_id,
							}).then(res=>{
								if(res.code==1){
									this.getStoreOrderDetail(order_id);
									wx.showToast({
										title: '收货成功',
										icon: 'success'
									})
								}
							});
						}
					}
				})
			},
			cancelFun(orderId){ //取消订单
				uni.showModal({
					content: '您确定要取消订单吗?',
					confirmColor:'#000',
					success: res => {
						if (res.confirm) {
							console.log(orderId);
							this.$u.api.cancelOrderApi({
								order_id:orderId
							}).then(res=>{
								if(res.code==1){
									uni.redirectTo({
										url:`/pageMember/orderDetails/submit?status=${2}`
									})
								}
							});
						}
					}
				})
			},
			evaluateFun(order_id) {// 立即评价
				this.$gourl(`/pageMember/orderDetails/evaluate?orderId=${order_id}`);
			},
			goShop(){ //跳转相关门店
				this.$gourl('../../pageIndex/storeInfo/storeDetails');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		padding-bottom: 180rpx;
		.cellList{
			flex: 1;
			display: flex;
			align-items: center;
			margin: 0 0 20rpx 0;
			.title{
				flex: 1;
			}
			.sub-content{
				flex: 3;
			}
			.copy{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					color: #1653EF;
				}
			}
		}
		.my-address-item-box{
			padding: 40rpx 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.user-name-phone-box{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
				.phone{font-size: 28rpx;margin-left: 20rpx;}
				.default{
					display: inline-block;
					width: 80rpx;height: 30rpx;
					background: #FF5C5C;
					border-radius: 15rpx;
					font-size: 22rpx !important;
					text-align: center;
					font-weight: 400;
					color: #FFFFFF !important;
					margin-left: 20rpx;
				}
			}
			.user-address-box{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
		.tobepaid-plate-box{
			width: 100%;
			padding: 30rpx 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.top-shop-box{
				padding-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
				justify-content: flex-start;
				text{max-width: 460rpx;padding: 0 10rpx;}
				image{width: 35rpx; height: 35rpx;}
				image:last-child{width: 25rpx; height: 25rpx;}
			}
			.goods-item-box{
				display: flex;
				margin-bottom: 30rpx;
				.left-img-box{
					flex: 0.2;
					line-height: 0;
					image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
				}
				.right-info-box{
					flex: 0.8;
					padding-left: 20rpx;
					.top-box{
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
						display: flex;
						padding-bottom: 20rpx;
						text:first-child{flex: 0.8;}
						text:last-child{flex: 0.2;font-size: 28rpx;font-weight: 400;color: #999999;text-align: right;}
					}
					.center-box{
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						padding-bottom: 70rpx;
					}
					.bottom-box{
						font-size: 22rpx;
						font-weight: bold;
						color: #333333;
						text{font-size: 30rpx;}
					}
				}
			}
		}
		.order-info-box{
			padding: 20rpx 0;
			background: #fff;
			margin-bottom: 20rpx;
			.top-title-box{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				padding: 20rpx;
				padding-bottom: 0;
			}
			.bottom-order-info-box{
				padding: 20rpx;
				padding-bottom: 0;
				display: flex;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				.left-key-box{flex: 0.25;display: flex;flex-direction: column;text{padding-bottom: 20rpx;}}
				.right-value-box{
					flex: 0.75;display: flex;flex-direction: column;
					text{padding-bottom: 20rpx;}					
					.fz{
						display: flex;
						justify-content: space-between;
						text:last-child{color: #1653EF;}
					}
				}
			}
		}
		.total-price-box{
			padding:  20rpx;
			padding-bottom: 100rpx;
			background: #fff;
			.bottom-order-info-box{
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				.left-key-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx;}}
				.right-value-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx; text-align: right;}}
			}
			.bottom-box{
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				text-align: right;
			}
		}
		.bottom-but-box{
			width: 100%;
			position: fixed;bottom: 0;z-index: 100;
			background: #fff;
			padding: 20rpx 20rpx 80rpx 20rpx;
			display: flex;
			justify-content: flex-end;
			view{
				margin-left: 20rpx;
			}
			.cancel-box{
				padding: 20rpx 50rpx;
				font-weight: 400;
				color: #000000;
				background: rgba(48, 48, 48, 0);
				border: 1rpx solid #808080;
				border-radius: 50rpx;
			}
			.buy-box{
				padding: 20rpx 50rpx;
				background: #000;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}
</style>